<div id="wrapper">
  <div class="flex flex-row">
    <!-- Search -->
    <mat-form-field
      class="search-form-field"
      appearance="outline"
      color="accent">
      <mat-label>{{
        'policy_definition_page.search_pol' | translate
      }}</mat-label>
      <input matInput [(ngModel)]="searchText" (input)="onSearch()" />
      <mat-icon matPrefix>search</mat-icon>
      <button
        *ngIf="searchText"
        mat-icon-button
        matSuffix
        (click)="searchText = ''; onSearch()">
        <mat-icon>close</mat-icon>
      </button>
    </mat-form-field>

    <!-- Create Button -->
    <button
      id="create-button"
      color="primary"
      mat-raised-button
      style="margin-top: 8px; height: 44px"
      routerLink="/policies/create">
      <mat-icon>add_circle_outline</mat-icon>
      {{ 'policy_definition_page.create_policy' | translate }}
    </button>

    <!-- Spacer -->
    <div class="grow"></div>

    <!-- Paginator -->
    <mat-paginator
      *ngIf="policyList.isReady"
      [hidePageSize]="true"
      [disabled]="true"
      [pageSize]="policyList.data.policyCards.length"
      [length]="policyList.data.numTotalPolicies"></mat-paginator>
  </div>

  <div class="flex flex-row justify-center">
    <loading-state
      *ngIf="policyList.isLoading"
      class="min-h-[35rem]"></loading-state>
    <error-state
      *ngIf="policyList.isError"
      class="min-h-[35rem]"
      [error]="policyList.errorOrUndefined"></error-state>
    <empty-state
      *ngIf="
        policyList.isReady &&
        (!policyList.data.numTotalPolicies ||
          !policyList.data.policyCards.length)
      "
      class="min-h-[35rem]"
      [emptyMessage]="
        'policy_definition_page.no_pol' | translate
      "></empty-state>
  </div>
  <policy-cards
    *ngIf="policyList.isReady && !!policyList.data.numTotalPolicies"
    [policyCards]="policyList.data.policyCards"
    [deleteBusy]="deleteBusy"
    (deleteDone)="refresh()"></policy-cards>
</div>
